<template>
  <TitleMode
    title="民宿收藏"
    :more="hotelList.length > 0 ? '全部' : ''"
    id="hotel"
    @more="to('/pages-sub/artist/hotel-list', { id: artist.id })"
  />
  <div class="hotel-list" v-if="hotelList.length > 0">
    <HotelItem v-for="(item, index) in hotelList" :key="index" :hotel="item" />
  </div>
  <Seat v-else height="260px" :loading="loading" size="mini" />
</template>
<script setup lang="ts">
import { to } from '@/utils/page'
import TitleMode from './TitleMode.vue'
import HotelItem from '@/pages/home/index/components/HotelItem.vue'

defineOptions({ name: 'Hotel' })

const props = defineProps(['artist'])
const hotelList = ref([])
const loading = ref(false)

if (props.artist.id) {
  getData()
}
function getData() {
  loading.value = true
  http
    .get('/hotels-layout-app/open/recommend-page', {
      userId: props.artist.id,
      current: 1,
      size: 10,
    })
    .then((res: any) => {
      hotelList.value = res.records
    })
    .finally(() => {
      loading.value = false
    })
}
</script>
<style lang="scss" scoped>
.hotel-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 26rpx;
  column-gap: 26rpx;
  margin-top: 0rpx;
}
</style>
